<template>
	<view>
		<view class="o_top">
			<view class="jui_h30"></view>
			<view class="jui_font_weight jui_pad_2432 jui_fc_fff" style="font-size: 38rpx;">
				<template v-if="info.status == 1">待发货</template>
				<template v-if="info.status == 2">已发货</template>
				<template v-if="info.status == 3">已完成</template>
			</view>
		</view>
		<view class="" style="position: absolute;width: 100%; top: 140rpx;">
			<view class="jui_mar_2432  jui_bg_fff jui_bor_rad_30" style="padding: 30rpx 20rpx;">
				<view class="jui_flex  jui_flex_items_center jui_mar_b20 jui_pad_b16"
					style="border-bottom: 1px solid #F5F5F5;" v-if="info.express_num">
					<view class="jui_fc_999 jui_fs29 jui_pad_l14">
						{{info.express}}：{{info.express_num}}
					</view>
					<image src="../../../static/imgs/user/copy.png" mode=""
						style="height: 32rpx;width: 32rpx; margin-left: 10rpx;" @tap="$tool.h5Copy(info.express_num)">
					</image>
				</view>
				<view class="jui_flex jui_flex_items_center">
					<image src="../../../static/imgs/user/address.png" mode="" style="height: 30rpx;width: 30rpx;">
					</image>
					<view class="jui_fs26 jui_mar_l16 jui_font_w400">
						{{info.site}}
					</view>
				</view>
				<!-- <view class="jui_fs29 jui_mar_t20 jui_font_w500">
					河南省郑州市高新区科学大道西三环往西2000米科学大道西三环往西2000米科学
				</view> -->
				<view class="jui_fs28 jui_mar_t12 jui_font_w500">
					{{ info.name}} {{info.mobile}}
				</view>
			</view>

			<view class="jui_pad_2432 jui_mar_2432 jui_bg_fff jui_bor_rad_30">

				<view class="jui_flex jui_flex_items_center jui_pad_b20">

					<image :src="info.shops_image" mode="" style="width: 160rpx;height: 160rpx;"></image>
					<view class="jui_flex_col jui_flex_justify_between"
						style="width: 70%;margin-left: 3%;height:160rpx;">
						<view class="">
							<view class="jui_flex jui_flex_justify_between ">
								<view class="jui_fc_333 jui_font_w600 jui_ellipsis_2">
									{{info.shops_name}}
								</view>
								<view class="jui_fs29">
									x{{info.buy_num}}
								</view>

							</view>
							<view class="jui_fc_999 jui_fs26 jui_mar_t16">
								规格：{{info.shops_format}}
							</view>
						</view>
						<view class="jui_flex jui_flex_justify_end ">

							<view class="jui_fs30 jui_fc_999">
								¥ {{info.shop_money}}
							</view>

						</view>
					</view>
				</view>
				<view class="jui_flex jui_flex_items_center jui_flex_justify_between jui_pad_r16">
					<view class="jui_fc_999" style="width: 160rpx;text-align: right;">
						运费
					</view>
					<view class="jui_fc_999 jui_fs29">
						¥ {{info.express_money}}
					</view>
				</view>
				<view class="jui_flex jui_flex_justify_end jui_font_w500 jui_pad_r16"
					style="border-bottom: 1px solid #F5F5F5;padding: 20rpx 0;">
					实付款￥{{info.pay_money}}
				</view>
				<view class="jui_flex jui_flex_justify_end jui_flex_items_center">

					<view class="jui_flex jui_flex_justify_end jui_pad_t20">
						<view class="jui_bor_rad_40 jui_mar_r20 jui_fc_zhuse"
							style="padding: 8rpx 36rpx;border: 1px solid #318BF2;font-size: 28rpx;" @tap="tixing()"
							v-if="info.status == 1 && info.is_remind == '1'">
							提醒发货
						</view>
						<view class="jui_bg_zhuse jui_bor_rad_40  jui_fc_fff"
							style="padding: 8rpx 26rpx;font-size: 28rpx;" v-if="info.status == 2" @tap="receive()">
							确认收货
						</view>

					</view>
				</view>
			</view>
			<view v-if="info.shop_name ||info.shop_mobile||info.shop_site"
				class="jui_pad_2432 jui_mar_2432 jui_bor_rad_30 jui_bg_fff">
				<view v-if="info.shop_name" class="">{{info.shop_name}}</view>
				<view v-if="info.shop_mobile" class="">商家电话：<text class="color-blue">{{info.shop_mobile}}</text></view>
				<view v-if="info.shop_site" class="">商家地址：{{info.shop_site}}</view>
			</view>
			<view class="jui_mar_2432 jui_pad_2432 jui_bg_fff   jui_pad_2432 jui_bor_rad_30">

				<view class="jui_flex  jui_flex_items_center jui_mar_b20" v-if="info.express_num">
					<view class="jui_fc_999 jui_fs28 ">
						订单编号：{{info.express_num}}
					</view>
					<image src="../../../static/imgs/user/copy.png" mode=""
						style="height: 32rpx;width: 32rpx; margin-left: 10rpx;" @tap="$tool.h5Copy(info.express_num)">
					</image>
				</view>
				<view class="jui_fc_999 jui_fs28 jui_mar_b20">
					下单时间：{{info.create_time}}
				</view>
				<view class="jui_fc_999 jui_fs28 jui_mar_b20" v-if="info.express_time">
					发货时间：{{info.express_time}}
				</view>
				<view class="jui_fc_999 jui_fs28 jui_mar_b20" v-if="info.yes_time">
					收货时间：{{info.yes_time}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				info: ''
			}
		},
		onLoad(opt) {
			this.id = opt.id;
			this.init();
		},
		methods: {
			init() {
				this.$api.getOrderFind({
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.info = res.data.order;
					}
				});
			},
			tixing() {
				this.$api.remind({
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.$msg(res.msg);
					}
				});
			},
			receive() {
				this.$api.yesOrder({
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						this.$msg(res.msg);
						setTimeout(() => {
							this.init();
						}, 500)
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.o_top {
		width: 100%;
		height: 330rpx;
		position: relative;
		background: url(../../../static/imgs/user/user_bg.png) no-repeat center;
		background-size: 100% 330rpx;
	}
</style>
